<template>
    <div>
        <el-row>
            <el-col>
                <h1>欢迎来到玖玖盈后台管理系统</h1>
                <p>用户：{{username}}</p>
                <p>视频直播推流地址：rtmp://video-center.alivecdn.com/live/live?vhost=live.sczzyf.com</p>
                <p>首页宣传片地址：http://upload.sczzyf.com/intro.mp4</p>
                <p>
                    是否直播：<el-switch v-model="live" off-color="#ff4949" on-text="是" off-text="否">
                    </el-switch>
                </p>
                <p v-if="!live">
                    视频地址：<el-input class="input" v-model="videosUrl" placeholder="请输入首页播放视频的地址"></el-input>
                </p>
                <p><el-button type="primary" @click="saveVideos">保存</el-button></p>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import {getConfig, setConfig} from '@/api/api'
export default {
    data: function() {
        return {
            username: '',
            live: true,
            videosUrl: '' //http://upload.sczzyf.com/intro.mp4
        }
    },
    created: function() {
        var user = JSON.parse(sessionStorage.getItem('user'));
        this.username = user.username;
        getConfig('live,videosUrl').then(res => {
            this.live = JSON.parse(res.live);
            this.videosUrl = res.videosUrl;
        })
    },
    methods: {
        saveVideos: function(){
            if(!this.live && !this.videosUrl){
                this.$message({
                    message: '请输入首页播放视频的地址',
                    type: 'error'
                })
                return;
            }
            setConfig({live: this.live, videosUrl: this.videosUrl}).then((res) => {
                console.log(res)
                this.$message({
                    message: '保存成功',
                    type: 'success'
                })
            })
        }
    }
}
</script>
<style scoped>
    .input{
        display: inline-block;
        width: 550px;
    }
</style>